<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>comment</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="../css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<script type="text/javascript" src="../js/vue.js"></script>
<style type="text/css" media="screen">
.btn-submit{
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}
</style>
</head>
<body>
	<div id="comment">
		   <nav class="navbar navbar-default">
		    		<div class="container">
		    			<div class="navbar-header">
		    				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
					        <span class="sr-only">Toggle navigation</span>
					        <span class="icon-bar"></span>
					        <span class="icon-bar"></span>
					        <span class="icon-bar"></span>
					        </button>
		      				<a class="navbar-brand" href="#">青年文摘<span class="sr-only">(current)</span></a>
		    			</div>
		    			<!-- 头部结束 -->
		    			<div class="collapse navbar-collapse"  id="bs-example-navbar-collapse-1">
		    				<ul class="nav navbar-nav">
		    					<li class="active"><a href="index.html" >首页</a></li>
								<!--获取分类数据-->
								<li v-for="(item,index) in nav" @click="rankJump0(index)"><a  >{{item}}</a></li>
								<!--获取分类数据结束-->
		    					<li><a href="collection.html">我的收藏</a></li>
		    				</ul>
		    				<div class="btn-group navbar-right" v-show="true">
							   	<a class="btn btn-success navbar-btn" href="login.html">登录</a>
							   	<a class="btn btn-success navbar-btn" href="register.html">注册</a>
						   </div>
		    				<form class="navbar-form navbar-right" role="search">
							    <div class="form-group">
									<a href="search.html">
										<input type="text" class="form-control" placeholder="搜索">

									</a>
							    </div>

						   </form>
		    			</div>
		    		</div>
		    </nav>

		<!--分类页-->
		<div class="content container" v-if="index">
			<div class="row">
				<div class="col-md-7 col-xs-7 col-md-offset-1 col-xs-offset-1 jumbotron">
					<article v-for="(item,index) in article">
						<h3 class="text-center" style="font-size: 20px">{{item.title}}</h3>
						<!--<div class="col-md-12 col-xs-12" v-html="item.content"></div>-->
						<div class="article-foot">
							<!--点赞-->
							<a class="btn btn-defult btn-sm"  role="button" v-on:click="count(item.id,index)">
				  			<span class="glyphicon glyphicon-thumbs-up" aria-hidden="true">{{item.zan}}
				  			</span>
							</a>
							<!--收藏-->
							<a class="btn btn-defult btn-sm" @click="clickCollect(item.id)" role="button">
								<span class="glyphicon glyphicon-tasks" aria-hidden="true"></span>
							</a>
							<!--查看文章-->
							<a class="btn btn-defult btn-sm" @click="commentJump(item.id)" role="button">
								<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
							</a>
							<!--转发-->
							<a class="btn btn-defult btn-sm article-btn" href="#" role="button">
								<span class="glyphicon glyphicon-new-window" aria-hidden="true"></span>
							</a>
						</div>
						<p style="height: 3px;background: #fff;"></p>
					</article>
				</div>
				<!-- 右边结束 -->
			</div>
		</div>
		<!--分类页结束-->
		<!--内容-->
		<div class="content container" v-if="content">
			<article>

				<h3 class="text-center" style="font-size: 20px">{{article1.title}}</h3>
				<div class="col-md-12 col-xs-12" v-html="article1.content"></div>
			</article>

		</div>
		<!--内容结束-->


		    <div class="container" v-if="comment">

		    	<div class="row">
		    		<form>
		    			<div class="form-group col-md-10">
		    				  <textarea v-model="com" class="form-control" rows="4" placeholder="请输入评论内容" v-model="commmentConcent"></textarea>
		    			</div>
		    		</form>
		    	</div>

				<button type="submit" class="btn btn-primary btn-sm btn-submit" @click.prevent ="add()">提交</button>
				<!-- 评论区 -->
				<div class="media"  v-for="item in allcomment">
					  <div class="media-body" style="background: #01AAED;padding: 10px;">
						<p>{{item.data}}</p>
						<span>评论人：{{item.username}}</span>
						<span>时间：{{item.create_time}}</span>
					  </div>
				</div>
			</div>
	</div>		    
		    <!-- 导航条结束 -->
		    <script type="text/javascript">
				// console.log(location.href);
		    	var comment = new Vue({
		    		el:"#comment",
		    		data:{
		    			article:null,
						article1:null,
						nav:null,
						index:false,//是否点击了导航栏
						content:true,//显示完整文章内容
		    			comment:true,
						com:null,
						allcomment:[]
		    		},
		    		methods:{
		    		    //添加评论
						add:function() {
						    let that = this;
                            let n = location.href.indexOf('=');
                            let article_id = location.href.slice(49);
                            let user_id = sessionStorage.id;
                            $.ajax({
                                url:'http://news.cn/index.php/index/Page/comment',
                                type:'post',
                                data:{article_id:article_id,user_id:user_id,data:that.com},
                                dataType:'json',
                                success:function(data) {
                                    console.log(data);


                                }
							});
						},
                        //查询文章内容
                        rankJump0:function(n) {
		    			     this.content = false;
		    			     this.index = true;
		    			     this.comment = false;
                            var that = this;
                            console.log('文章id',n);
                            $.ajax({
                                url:'http://news.cn/index.php/index/Page/content',
                                type:'post',
                                data:{id:n},
                                dataType:'json',
                                success:function(data) {
                                    // console.log(data);
                                    that.article = data.data;

                                }
                            });
                        },
                        //点赞
                        count:function(n,index) {
                            // alert(n);
                            let that = this;
                            $.ajax({
                                url:'http://news.cn/index.php/index/Page/zan',
                                type:'post',
                                data:{id:n},
                                dataType:'json',
                                success:function(data) {
                                    console.log(data);
                                    that.article[index].zan++;

                                }
                            });
                        },
                        commentJump:function(id) {
                            location.href="comment.html?="+id;
                        },
						//收藏
                        clickCollect: function(id) {
		    			     if(sessionStorage.tag !=1) {
		    			         alert('请先登录再收藏!');
		    			         return false;
							 }else {
		    			         let user_id = sessionStorage.id;
                                 $.ajax({
                                     url:'http://news.cn/index.php/index/Page/collect',
                                     type:'post',
									 data:{'user_id':user_id,'id':id},
                                     dataType:'json',
                                     success:function(data) {
                                         // console.log(data);
                                         alert(data.msg);
                                     }
                                 });
							 }
						}
		    		},
                    created:function(){
                        let that = this;
                        //获取导航分类信息
                        $.ajax({
                            url:'http://news.cn/index.php/index/Page/selGroup',
                            type:'post',
                            dataType:'json',
                            success:function(data) {
                                // console.log(data);
                                that.nav = data.data;
                            }
                        });
                        //获取所有文章内容
                      	let n = location.href.indexOf('=');
                      	let id = location.href.slice(49);
                      	// console.log(id);
						$.ajax({
							url:'http://news.cn/index.php/index/Page/article',
							type:'post',
							data:{id:id},
							dataType:'json',
							success:function(data) {
								console.log(data);
								that.article1 = data.data[0];

							}
						});

						//获取评论
                        $.ajax({
                            url:'http://news.cn/index.php/index/Page/selComment',
                            type:'post',
                            data:{id:id},
                            dataType:'json',
                            success:function(data) {
                                console.log(data);
								if(data.code == 1) {
								    that.allcomment = data.data;
								}
                            }
                        });

					}
		    	})
		    </script>
	     
</body>
</html>